<template>
  <view class="page-head" :style="{'padding-top':paddingTop+'px'}">
    <!-- logo -->
    <view class="logo-contanier">
      <image :src="logoSrc" class='logo-image' lazy-load></image>
    </view>
    <!-- 搜索 -->
    <view class="search-container" @click="handleToSearchPage">
      <uni-easyinput prefixIcon="search" disabled disableColor="#fff" placeholder="请输入搜索内容"></uni-easyinput>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      mode: {
        default: "light",
        type: String
      },
      url: {
        default: "",
        type: String
      }
    },
    data() {
      return {
        paddingTop: 0
      }
    },
    computed: {
      logoSrc() {
        let light = '/static/logo/logo.png';
        let black = "/static/logo/logo-white.png";
        let srcMap = {
          light,
          black
        }
        return srcMap[this.mode];
      }
    },
    mounted() {
      // #ifdef MP-WEIXIN
      let MenuButtonBoundingClientRect = uni.getMenuButtonBoundingClientRect();
      this.paddingTop = MenuButtonBoundingClientRect.top;
      // #endif
    },
    methods: {
      handleToSearchPage() {
        // 跳转
        uni.navigateTo({
          url: this.url
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page-head {
    padding: 0 32rpx;
    padding-bottom: 8rpx;
    box-sizing: border-box;


    // logo区域
    .logo-contanier {
      display: flex;
      align-items: center;
      z-index: 1;
      position: relative;

      .logo-image {
        float: left;
        width: 310rpx;
        height: 128rpx;
      }

      .logo-text {
        width: 180rpx;
        height: 56rpx;
        margin-left: 20px;
      }
    }

    // 搜索区域
    .search-container {
      margin-top: -10rpx;

      z-index: 0;
      position: relative;

      // 因组件库无法满足圆角需求 故改为deep方式改变样式
      /deep/ .uni-easyinput__content {
        border-radius: 24rpx !important;
      }
    }
  }
</style>